<template>
  <div class="el-custom-from">
    <el-tabs v-model="activeName" class="node-tabs-kts" v-loading="loading">
      <el-tab-pane name="property">
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-edit"></i>
              {{
                this.isProcesView
                  ? this.$t("flowi18n.flow_process_view")
                  : this.$t("flowi18n.flow_picture")
              }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container>
            <el-main id="el-custom-form-main">
              <div
                class="flowproperty-container container"
                :style="contentHeight"
              >
                <el-scrollbar>
                  <el-button-group v-if="this.isProcesView">
                    <el-button
                      type="success"
                      size="small"
                      icon="el-icon-finished"
                      >已完成</el-button
                    >
                    <el-button type="danger" size="small" icon="el-icon-lx-more"
                      >进行中</el-button
                    >
                  </el-button-group>
                  <div class="super-flow-base-demo">
                    <super-flow
                      ref="superFlow"
                      :link-style="linkStyle"
                    ></super-flow></div
                ></el-scrollbar>
              </div>
            </el-main>
          </el-container>
        </div>
      </el-tab-pane>
      <el-tab-pane name="property_table" v-if="this.isProcesView">
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-lx-time"></i>
              {{ this.$t("flowi18n.flow_process_step_view") }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container>
            <el-main id="el-custom-form-main">
              <div
                class="flowproperty-container container"
                :style="contentHeight"
              >
                <el-scrollbar>
                  <el-steps
                    direction="vertical"
                    :active="step.activitStep"
                    process-status="finish"
                    finish-status="success"
                  >
                    <el-step
                      :title="item.title"
                      v-for="item in step.steps"
                      :key="item.id"
                    >
                      <template #description>
                        <el-card>
                          <el-table :data="item.lists">
                            <el-table-column
                              :show-overflow-tooltip="true"
                              prop="title"
                              :label="$t('flowi18n.flow_process_step_title')"
                            ></el-table-column>
                            <el-table-column
                              :show-overflow-tooltip="true"
                              prop="dic_Sender"
                              :label="
                                $t('flowi18n.flow_process_step_sendpeople')
                              "
                            ></el-table-column>
                            <el-table-column
                              :show-overflow-tooltip="true"
                              prop="dic_ReceivingTime"
                              :label="$t('flowi18n.flow_process_step_senddate')"
                            ></el-table-column>
                            <el-table-column
                              :show-overflow-tooltip="true"
                              prop="dic_Reviewer"
                              :label="$t('flowi18n.flow_process_step_approval')"
                            ></el-table-column>
                            <el-table-column
                              :show-overflow-tooltip="true"
                              prop="dic_ComplatedTime"
                              :label="
                                $t('flowi18n.flow_process_step_approvaldate')
                              "
                            ></el-table-column>
                            <el-table-column
                              :show-overflow-tooltip="true"
                              prop="dic_Status"
                              :label="
                                $t('flowi18n.flow_current_task_step_stats')
                              "
                            ></el-table-column>
                            <el-table-column
                              :show-overflow-tooltip="true"
                              prop="dic_FlowStatus"
                              :label="$t('flowi18n.flow_process_step_note')"
                            ></el-table-column>
                          </el-table>
                        </el-card>
                      </template>
                    </el-step>
                  </el-steps>
                </el-scrollbar>
              </div>
            </el-main>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="position: absolute;right:25px;top:2px;">
      <el-button
        class="el-field-title-close"
        @click="closedEvent"
        type="text"
        icon="el-icon-close"
        >{{ $t("table.Global_Back") }}</el-button
      >
    </div>
  </div>
</template>
<script>
let windowHeight = parseInt(window.innerHeight);
import reqVue from "../../utils/req.vue";
import confVue from "../../utils/conf.vue";
export default {
  name: "flow-workbench-propety",
  data() {
    return {
      contentHeight: {
        height: "",
      },
      autoHeight: {
        height: "",
        width: "98%",
        margin: "11px",
        float: "left",
      },
      activeName: "property",
      loading: true,
      flowId: 0,
      apipath: "flowcenter",
      way: confVue.$flowApi,
      flowVersionId: 0,
      taskId: 0,
      isProcesView: false,
      step: {},
    };
  },
  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 120 + "px";
    },
    ///加载流程属性
    InitFlow() {
      let url =
        this.apipath +
        "/v2.0/diagram/" +
        this.flowId +
        "/" +
        this.flowVersionId +
        "/" +
        this.taskId;
      reqVue.$Post(null, url, this.way).then(
        function(data) {
          if (data.status) {
            this.$nextTick(function() {
              this.$refs.superFlow.graph.flowproperty = data.body.flowProperty;
              this.$refs.superFlow.nodeList = data.body.nodeList;
              this.$refs.superFlow.linkList = data.body.linkList;
              this.$refs.superFlow.isView = true;
            });
            this.flowproperty = data.body.flowProperty;
            this.step = data.body.stepView;
            this.loading = false;
          } else {
            this.$message.error(data.message);
            this.loading = false;
          }
        }.bind(this)
      );
    },
    closedEvent() {
      this.$emit("ClosedEvent");
    },
    linkStyle(link) {
      if (this.isProcesView) {
        if (link.meta.lineStatus == "completed") {
          return {
            hover: "#F56C6C",
            color: "#85ce61",
            textColor: "#85ce61",
            textHover: "#F56C6C",
            font: "12px Arial",
            dotted: false,
            lineDash: [4, 4],
            background: "rgba(255,255,255,0.6)",
          };
        } else if (link.meta.lineStatus == "doing") {
          return {
            hover: "#F56C6C",
            color: "#F56C6C",
            textColor: "#F56C6C",
            textHover: "#F56C6C",
            font: "12px Arial",
            dotted: false,
            lineDash: [4, 4],
            background: "rgba(255,255,255,0.6)",
          };
        }
      }
    },
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  components: {},
};
</script>
